<template>
  <div class="main">
    <div class="form-container">
      <div class="form-main">
        <!--<h2 style="background:#265eff;">疫情上报系统</h2>-->
        <!--<p class="warn-content">为严防疫情扩散，进一步做好新型冠状病毒的肺炎疫情防控工作，请如实填写以下信息!</p>-->

        <div class="reportClues" style="padding-bottom: 20px">
          <!-- <span class="required" style="color:red">*</span> -->
          <p>线索建议类型</p>
          <div class="form-border form-twoBor" style='border: 1px solid #c6c8c9;'>
            <div v-for="clue in cluesType">
              <el-radio v-model="checkClue" :label="clue.val">{{clue.name}}</el-radio>
              <!--                <input type="radio" name="gender" :value="clue.val" :id="'clue'+clue.val" checked="checkClue"
                                     v-model="checkClue"/><label :for="'clue'+clue.val"> {{clue.name}}</label>-->
            </div>
          </div>
          <p>线索描述</p>
          <div class="form-border form-twoBor" style='border: 1px solid #c6c8c9;'>
            <div class="textAreaBox" style="border-bottom: 1px solid rgba(255, 255, 255, 0.24);">
              <textarea name="clueCon" id="" maxlength="255" @input="descInput"
                        v-model="clue_describe" placeholder=""></textarea>
              <span>{{remnant}}/255</span>
            </div>
          </div>
        </div>

      </div>

    </div>

    <!-- <popup-picker :showCell="false" title="测试" :show.sync="showPopupPicker" :data="casList" :columns="3" v-model="casModel" ></popup-picker> -->
  </div>
</template>
<script>
  import {newquestionnaireData, queryCityData} from '@/assets/js/service'
  import fromConfig from '../../../static/formConfig'
  import {Confirm, Datetime, PopupPicker, Popup} from 'vux'
  import menuLinkage from '../commons/menuLinkage.vue'

  export default {
    components: {
      Confirm,
      Datetime,
      PopupPicker,
      Popup,
      menuLinkage
    },
    data() {
      return {
        checkClue: '',
        cluesType: [
          {val: '0', name: '疑似疫情报告'},
          {val: '1', name: '邻居突发情况'},
          {val: '2', name: '不符隔离要求报告'},
          {val: '3', name: '其他特殊情况'},
          // {val: '4', name: '无'},
        ],
        clue_describe: '',
        remnant: 255

      }
    },
    created() {

    },
    mounted: function () {
      let epidemicData = JSON.parse(localStorage.getItem('epidemicData'));
        if(epidemicData) {
            this.checkClue = epidemicData.clueType
            this.clue_describe = epidemicData.clueDescribe
        } 
    },
    watch: {},
    methods: {
      descInput() {
        var txtVal = this.clue_describe.length;
        this.remnant = 255 - txtVal;
      }
    }
  }
</script>
<style lang="less" scoped>

  .main {
    overflow: hidden;
    background-size: 100% 100%;
    .form-container {
        background: #f8fafb;
        background-size: 100% 100%;
        width: calc(100% -16px);
        border-radius: 8px;
        padding-top: 15px;
        border: solid 1px #e5e5e5;
        // margin: 0 3%;
        margin-left:8px;
        margin-right:8px;
        // margin-bottom: 10px;
        padding-bottom: 25px;
      .form-main {
        width: 100%;
        padding: 0 20px;
        color: #333;
        // border-radius: 8px;
        // padding-top: 15px;
        // border: 1px solid #e5e5e5;
        background-color: #f5f8fa;
        .reportClues {
          p {
            font-size: 15px;
            padding-left: 5px;
          }
          .textAreaBox {
            position: relative;
            height: 8em;
            padding: 0;
            z-index: 2;
            textarea {
              position: relative;
              width: 100%;
              height: 100%;
              padding: 10px;
            }
            span {
              position: absolute;
              right: 0;
              bottom: 0;
              z-index: 1;
              color: #ccc;
            }
          }
        }
        .warn-content {
          margin-top: 10px;
          margin-bottom: 18px;
          line-height: 30px;
          font-size: 14px;
        }
        h2 {
          text-align: center;
          color: #fff;
          width: calc(100% + 40px);
          margin-left: -20px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.24);
          height: 60px;
          line-height: 60px;
          font-size: 24px;
        }
        h4 {
          margin-top: 15px;
        }
        .form-border {
          position: relative;
          width: 100%;
          background-color: rgba(255, 255, 255, 0.9);
          color: #333333;
          padding: 5px;
          margin: 5px 0;
          margin-bottom: 20px;
          border-radius: 8px;
          div + div {
            border-top: 1px solid #bfbfbf;;
          }
        }
        .form-twoBor {
          padding: 5px 0;
          div {
            width: 100%;
            padding: 10px;
            input {
              vertical-align: middle;
              width: 20px;
              height: 20px;
            }
            label {
              font-size: 14px;
            }
          }
        }

      }
    }
    input {
      border: 1px solid #cccccc;
    }
    .yy-input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      /* WebKit browsers */
      color: red;
    }

  }
</style>
